<template>
    <div>
        <el-card class="box-card">
            <div class="text item">
                <div class="left">
                    <div class="user-item" v-for="item, index in chatList" :key="index" @click="changeUserChat(item)"
                        :class="clickUsername == item.username ? 'bg' : ''">
                        <div class="image">
                            <el-avatar :size="40" :src="item.avatar"></el-avatar>
                        </div>
                        <div>
                            <span>{{ item.name }}</span>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="right-content">
                        <div v-show="clickUsername == null">
                            <span>点击用户头像后开始聊天</span>
                        </div>
                        <div v-for="item, index in msgList" :key="index">
                            <div v-if="item.username != $store.getters.username" class="chat-item-left">
                                <div class="image-left">
                                    <el-avatar :size="40" round
                                        src="http://8.130.77.26:9092/yyyysmfw/2023/09/08/50db6ed10a3342a0e65b61175a0b2455.jpg" />
                                </div>
                                <div class="content">
                                    <span>{{ item.msg }}</span>
                                </div>
                            </div>
                            <div v-else class="chat-item-right">
                                <div class="content">
                                    <span>{{ item.msg }}</span>
                                </div>
                                <div class="image-right">
                                    <el-avatar :size="40" round
                                        src="http://8.130.77.26:9092/yyyysmfw/2023/09/08/50db6ed10a3342a0e65b61175a0b2455.jpg" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <el-input placeholder="请输入聊天内容" v-model="content">
                            <template slot="append"><el-button type="primary" @click="sendMessage">发送</el-button></template>
                        </el-input>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "DoctorMessage",
    data() {
        return {
            // 内容
            content: null,
            // 聊天列表
            msgList: [],
            // 点击的用户账号
            clickUsername: null,
            // 聊天ID
            chatId: null

        }
    },
    mounted() {
        this.getChatList();
    },
    // 离开页面生命周期函数
    destroyed: function () {
        this.websocketclose();
    },
    methods: {
        // 获取聊天列表
        async getChatList() {
            let res = await this.$store.dispatch("getChatList")
            if (!res.success) this.$myfun.resError(res)
        },
        //初始化websocket
        initWebSocket: function (toUsername) { // 建立连接
            // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
            this.toUsername = toUsername;
            this.fromUsername = this.$store.getters.username;
            var url = "ws://localhost:8081/api/websocket/" + this.fromUsername;
            this.websock = new WebSocket(url);
            this.websock.onopen = this.websocketonopen;
            this.websock.onerror = this.websocketonerror;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
        },
        // 连接成功后调用
        websocketonopen: function () {
            console.log("WebSocket连接成功");
        },
        // 发生错误时调用
        websocketonerror: function (e) {
            console.log("WebSocket连接发生错误");
        },
        // 接收后端消息
        // vue 客户端根据返回的cmd类型处理不同的业务响应
        websocketonmessage: function (e) {
            this.msgList.push(JSON.parse(e.data))

        },
        // 关闭连接时调用
        websocketclose: function (e) {
            console.log("connection closed (" + e + ")");
        },
        // 发送消息
        sendMessage() {
            var socketMsg = { msg: this.content, fromUsername: this.fromUsername, toUsername: this.toUsername, chatId: this.chatId }
            this.content = null
            this.websock.send(JSON.stringify(socketMsg))
        },
        // 跟换聊天对象
        changeUserChat(item) {
            this.chatId = item.id
            this.clickUsername = item.username
            this.initWebSocket(item.username)
        }
    },
    computed: {
        chatList() {
            return this.$store.state.chat.chatList
        }
    }
}
</script>

<style scoped>
.item {
    display: flex;
}

.left {
    width: 20%;
    border-right: solid black 1px;
}

.image {
    margin-right: 10px;
}

.user-item {
    width: 100%;
    margin: 10px 0 10px 0;
    align-items: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.bg {
    background-color: rgb(247, 242, 242);
}

.right {
    padding: 20px;
    width: 80%;
}

.right-content {
    height: 470px;
    overflow: auto;
}

.chat-item-left {
    display: flex;
    align-items: center;
    margin: 5px 0 5px 0;

}

.image-left {
    width: 7%;
    margin-right: 10px;
    text-align: center;
}

.content {
    font-size: 0.9rem;
    max-width: 93%;
    background-color: rgb(155, 200, 88);
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

.chat-item-right {
    margin: 5px 0 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.image-right {
    width: 7%;
    margin-left: 10px;
    text-align: center;
}

.btn {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
}
</style>